computed介紹

• computed 中譯是計算，顧名思義是將複雜、重複的邏輯抽離，並使用computed處理。
  在 Vue 中透過 computed 會 cache 住沒有改變的資料，因此正確且適當的使用 computed 將可以減少資料重新運算的次數，讓網頁的效能提升。
  

• 在 Vue 中，computed 的屬性可以被視為像是 data 一樣，可以讀取和設值，因此在 computed 中可以分成 getter（讀取） 和 setter（設值），在沒有寫 setter 的情況下，computed 預設只有 getter ，也就是只能讀取，不能改變設值。

• 雖然 computed 內的屬性可以被視為像是 data 一樣，但在使用上，一般還是會讓 computed 類似唯讀的狀態，也就是去處理 data 資料，然後把它吐出來使用。

• 在 getter 中，要記得搭配使用 return 來把值返回出來。

以下利用computed計算data items陣列長度的演練

<div id="app">
    <p>{{ arrayLength }}</p>
</div>

let app = new Vue({
  el: '#app',
  data: {
    items: [1, 2, 3]
  },
	computed: {
        arrayLength() {
          return 'The items length is ' + this.items.length
        }
    }
})

getter & setter

預設 Computed 是 getter，也就是一般情況下computed的值只能讀取不能更改。
但在一些例子下你可以加上 setter 做更改處理。

<template>
  <input type="text" v-model="average">
  <ul>
    <li>{{ english }}</li>
    <li>{{ math }}</li>
    <li>{{ average }}</li>
  </ul>
</template>

<script>
  export default {
    data() {
      return {
        english: 100,
        math: 80,
      }
    },
    computed: {
      average: {
        // getter: 當english或math數值異動時候，會重新計算average並cache起來
        get() {
          return (this.english + this.math) / 2
        },
        // setter: 當 computed 的屬性要被設值時，就會觸發 setter 去處理的事情
        set(newValue) {
          if (newValue < 60){
              this.english = this.english + 30;
              this.math = this.math + 30;
          }
        },
      },
    },
  }
</script>

getter

當網頁初始化時，會綁定computed變數名稱，去計算變數的值，因computed依賴於。

setter

input 是直接绑 v-model="average"，如果我们直接修改了average的值，就會觸發setter，再依序觸發getter以及updated。

觸發的順序

setter -> getter -> update

Computed vs Methods

Methods也可以做到跟Computed一樣的事情，但Computed有個cache的特性，當相依的變數沒有變化時，就不會重新計算！
而Methods不管資料有沒有變動，每次都需要重新計算，效能比Computed差。

Computed vs Watch

Computed 是根據依賴的值變更時做計算，Watch 則是監聽「一個值」變更而做接下來的程序。
Computed 經由依賴的值變化後，計算出一個結果 ( 多對一 ) ，而 Watch 則是監聽一個值的變化，利用waatch到的值變化後，去做邏輯 ( 一對多 ) 。

沒有比較沒有傷害

Resource
[Vue] 還是不懂 Computed ？
Computed 中 getter 和 setter 觸發的時間點